<template>
  <div class="main-body">
    <el-card class="">
      <el-form :model="search" label-width="110px" size="mini">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="岗位">
              <el-select clearable v-model="search.name" placeholder="请选择">
                <el-option label="AI开发工程师" value="AI开发工程师">
                </el-option>
                <el-option label="开发工程师" value="开发工程师"> </el-option>
                <el-option label="Python开发" value="Python开发"> </el-option>
                <el-option label="爬虫方向" value="爬虫方向"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="城市">
              <el-select clearable v-model="search.city" placeholder="请选择">
                <el-option label="北京" value="北京"> </el-option>
                <el-option label="上海" value="上海"> </el-option>
                <el-option label="深圳" value="深圳"> </el-option>
                <el-option label="杭州" value="杭州"> </el-option>
                <el-option label="广州" value="广州"> </el-option>
                <el-option label="长沙" value="长沙"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开发栈">
              <el-select
                clearable
                v-model="search.select_can"
                placeholder="请选择"
              >
                <el-option label="nodejs" value="nodejs"> </el-option>
                <el-option label="python" value="python"> </el-option>
                <el-option label="javascript" value="javascript"> </el-option>
                <el-option label="php" value="php"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="20">
            <el-button
              @click="handleSearch"
              type="primary"
              icon="el-icon-search"
              size="mini"
              >查询</el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <div class="main-item">
      <el-card
        style="margin-top: 10px"
        v-for="(item, index) in boss_list"
        :key="index"
      >
        <div class="item flex content" @click="handleJump(item.company_link)">
          <div>
            <div class="left-name">{{ item.title }}</div>
            <div style="margin-top: 10px; margin-bottom: 10px">
              <span class="left-money">{{
                item.pay && item.pay.replace(/\\/g, "")
              }}</span
              ><span style="margin-left: 10px">{{ item.province }}</span>
            </div>
            <el-tag
              v-show="initem != ''"
              type="info"
              style="margin-left: 10px"
              v-for="(initem, inindex) in item.keyword"
              :key="inindex"
              >{{ initem.replace(/\'/g, "") }}</el-tag
            >
          </div>
          <div style="text-align: right">
            <div class="left-name">{{ item.company_name }}</div>
            <!-- <div style="font-size: 18px; margin-top: 10px; margin-bottom: 10px">
              {{ item.company_msg }}
            </div> -->
            <div class="right-word-hidden" :title="item.address">
              {{ item.address }}
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="pagin">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-count="page"
        @current-change="currentPage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
export default {
  name: "Home",
  setup() {
    let state = reactive({
      page: 1,
      total: 0,
      search: {
        select_can: "",
        name: "",
        city: "",
      },
      boss_list: [],
    });

    onMounted(() => {
      init(true);
    });
    let init = (flag = false) => {
      if (!flag) {
        if (state.search.name == "" || state.search.city == "") {
          ElMessage({
            showClose: true,
            message: "岗位和城市是必填项请选择!",
            type: "error",
          });
          return;
        }
      }

      axios
        .post("https://www.czh1995.top:3200/search", {
          page: state.page,
          ...state.search,
        })
        .then((res) => {
          state.boss_list = res.data.result;
          state.boss_list.forEach((item) => {
            item.keyword = item.keyword.substr(0, item.keyword.length - 1);
            item.keyword = item.keyword.substr(1, item.keyword.length - 1);
            item.keyword = item.keyword.split(",");
          });
          state.total = res.data.total;
        });
    };
    let handleSearch = () => {
      init();
    };
    let currentPage = (page) => {
      state.page = page;
      init(true);
    };

    let handleJump = (url) => {
      window.open(url);
    };
    return { ...toRefs(state), handleSearch, currentPage, handleJump };
  },
};
</script>

<style scoped>
.main-body {
  width: 900px;
  /* height: 800px; */
  margin: 0 auto;
  /* border: 1px solid red; */
  /* margin-top: 10px; */
  padding-top: 20px;
}
.flex {
  display: flex;
}
.content {
  justify-content: space-between;
  padding: 0 20px 20px 20px;
  background: white;
  cursor: pointer;
  border-radius: 12px;
}
.pagin {
  background: white;
  margin-top: 5px;
}
.left-name {
  font-size: 20px;
  color: rgba(22, 29, 159, 0.87);
}
.left-money {
  font-size: 18px;
  color: orange;
}
.right-word-hidden {
  margin-top: 10px;
  font-size: 18px;
  color: rgb(144, 147, 153);
  width: 250px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  float: right;
  cursor: pointer;
}
</style>